{% block sw_text_editor_toolbar_table_button %}
<div class="sw-text-editor-toolbar-table-button">

    {% block sw_text_editor_toolbar_table_button_table_head_switch %}

    <mt-switch
        v-model="addTableHead"
        :label="$tc('sw-text-editor-toolbar.table.addHeading')"
    />
    {% endblock %}

    {% block sw_text_editor_toolbar_table_button_table_grid_input %}
    <div class="sw-text-editor-toolbar-table-button__grid-input">
        <mt-number-field
            v-model="selectedCols"
            number-type="int"
            :min="0"
            :max="colMaxLimit"
            :label="$tc('sw-text-editor-toolbar.table.cols')"
            @input-change="setSelectedCols"
            @update:model-value="setSelectedCols"
        />
        <mt-icon
            class="sw-text-editor-toolbar-table-button__grid-input-icon"
            name="regular-times"
            size="12"
        />
        <mt-number-field
            v-model="selectedRows"
            number-type="int"
            :min="0"
            :max="rowMaxLimit"
            :label="$tc('sw-text-editor-toolbar.table.rows')"
            @input-change="setSelectedRows"
            @update:model-value="setSelectedRows"
        />
    </div>
    {% endblock %}

    <p class="sw-text-editor-toolbar-table-button__grid-info">
        {{ $tc('sw-text-editor-toolbar.table.editInfo') }}
    </p>

    {% block sw_text_editor_toolbar_table_button_table %}
    <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -->
    <table
        class="sw-text-editor-toolbar-table-button__table"
        @click="emitTable"
    >

        {% block sw_text_editor_toolbar_table_button_table_head %}
        <thead
            v-if="addTableHead"
            class="sw-text-editor-toolbar-table-button__table-head"
        >

            {% block sw_text_editor_toolbar_table_button_table_head_row %}
            <tr class="sw-text-editor-toolbar-table-button__row">

                {% block sw_text_editor_toolbar_table_button_table_head_col %}
                <td
                    v-for="colIndex in tableCols"
                    :key="colIndex"
                    class="sw-text-editor-toolbar-table-button__col"
                >
                    <div class="sw-text-editor-toolbar-table-button__col-placeholder"></div>
                </td>
                {% endblock %}
            </tr>
            {% endblock %}
        </thead>
        {% endblock %}

        {% block sw_text_editor_toolbar_table_button_table_body %}
        <tbody class="sw-text-editor-toolbar-table-button__table-body">

            {% block sw_text_editor_toolbar_table_button_table_body_row %}
            <tr
                v-for="rowIndex in tableRows"
                :key="rowIndex"
                class="sw-text-editor-toolbar-table-button__row"
                v-on="rowIndex === tableRows ? { mouseleave: (event) => onLastRowMouseOut(event) } : null"
            >

                {% block sw_text_editor_toolbar_table_button_table_body_col %}
                <!-- eslint-disable-next-line vuejs-accessibility/mouse-events-have-key-events, vuejs-accessibility/no-static-element-interactions -->
                <td
                    v-for="colIndex in tableCols"
                    :key="colIndex"
                    class="sw-text-editor-toolbar-table-button__col"
                    v-on="colIndex === tableCols ? { mouseleave: (event) => onLastColMouseOut(event) } : null"
                    @mouseover="onMouseOverColumn($event, { rows: rowIndex, cols: colIndex })"
                >
                    <div class="sw-text-editor-toolbar-table-button__col-placeholder"></div>
                </td>
                {% endblock %}
            </tr>
            {% endblock %}
        </tbody>
        {% endblock %}
    </table>
    {% endblock %}

    {% block sw_text_editor_toolbar_table_button_table_insert %}
    <div class="sw-text-editor-toolbar-table-button__insert">
        <mt-button
            size="small"
            variant="primary"
            @click="emitTable"
        >
            {{ $tc('global.default.add') }}
        </mt-button>
    </div>
    {% endblock %}
</div>
{% endblock %}
